<template>
	<view class="content">

		<view class="list">
			<view class="item" v-for="(item,index) in list">
				<view class="top-par">
					<view class="num">
						订单编号：{{item.order.sn}}
					</view>
					<view class="tag">
						{{item.status}}
					</view>
				</view>

				<view class="mid-par">
					<view class="o-list">
						<view class="o-item" v-for="(oitem,oindex) in item.order.orderItems">

							<view class="img"
								:style="{background:oitem.thumbnail?('url('+baseUrl+ oitem.thumbnail +') center no-repeat'):'',backgroundSize:'cover'}">

							</view>
							<view class="int">
								<view class="t1">
									{{oitem.name}}
								</view>
								<view class="t2">
									重量：{{oitem.weight}}G
								</view>
								<view class="t3">
									¥ {{oitem.price}}
								</view>
							</view>
							<view class="cp-num">
								x {{oitem.quantity}}
							</view>
						</view>

						<view class="pay-num">
							<!-- 需付款: ¥ {{item.order.amountPaid}} -->
						</view>

					</view>
				</view>

				<view class="order-btn">
					<navigator class="btn" :url="'/pages/order/detail?sn=' + item.order.sn">订单详情</navigator>
					<navigator class="btn" :url="'/pages/after/after-detail?sn=' + item.order.sn">售后详情</navigator>
					<navigator class="btn" :url="'/pages/order/after?sn=' + item.order.sn + '&type=1&id=' + item.id" v-if="item.status=='审核通过' && (item.trackingNo === null || item.trackingNo === '')">信息填写</navigator>
				</view>

			</view>


		</view>

	</view>
</template>

<script>
	import {
		aftersalesList
	} from '@/api/order.js';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				CategoryID: '',
				img: '../../static/images/cp10.png',
				navbar: [{
					type: '',
					name: '全部'
				}, {
					type: 'PENDING_PAYMENT',
					name: '待付款'
				}, {
					type: 'PENDING_SHIPMENT',
					name: '待发货'
				}, {
					type: 'SHIPPED',
					name: '待收货'
				}, {
					type: 'COMPLETED',
					name: '已完成'
				}],
				list: '',
				// 订单状态（null 全部，PENDING_PAYMENT 代付款，PENDING_SHIPMENT 代发货，SHIPPED 待收货，COMPLETED 已完成)
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				aftersalesList({pageNumber: 1}).then(res => {
					console.log(res)
					this.list = res.data.page
					this.list.forEach((i, index) => {
						if (i.status == 'PENDING') {
							this.list[index].status = '待审核'
						}
						if (i.status == 'APPROVED') {
							this.list[index].status = '审核通过'
						}
						if (i.status == 'COMPLETED') {
							this.list[index].status = '已完成'
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.order-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;

		.tab-item {
			position: relative;
			padding: 35rpx 0;
			font-size: 24rpx;
		}

		.tab-item.on::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 5rpx;
			bottom: 0;
			background-color: #b81c22;
		}
	}

	.list {
		.item {
			background-color: #fff;
			padding: 30rpx;
			margin-top: 30rpx;

			.top-par {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				margin-bottom: 30rpx;

				.num {
					color: #595757;
				}

				.tag {
					color: #b81c22;
				}
			}

			.mid-par {
				.o-list {
					.o-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 30rpx;

						.img {
							width: 160rpx;
							height: 160rpx;
						}

						.int {
							flex: 1;
							padding: 0 30rpx;

							.t1 {
								font-size: 24rpx;
								color: #1a1a1a;
								margin-bottom: 20rpx;
							}

							.t2 {
								font-size: 28rpx;
								color: #898989;
								margin-bottom: 45rpx;
							}

							.t3 {
								color: #898989;
								font-size: 28rpx;
							}
						}

						.cp-num {
							font-size: 28rpx;
							color: #898989;
						}
					}

					.pay-num {
						text-align: right;
						color: #1a1a1a;
						font-size: 24rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #f0f0f0;
					}
				}
			}

			.order-btn {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.btn {
					width: 180rpx;
					height: 60rpx;
					line-height: 57rpx;
					text-align: center;
					background-color: #ffffff;
					border: solid 1px #000000;
					margin-left: 15rpx;
					font-size: 24rpx;
					color: #1b1b1b;
					letter-spacing: 3rpx;
				}
			}


		}
	}
</style>
